<template>
  <view class="container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="title">设备监控系统</view>
      <view class="info">
        <text>{{ currentTime }}</text>
        <text class="username">{{ userInfo.name }}</text>
      </view>
    </view>

    <!-- 导航区 -->
    <view class="nav">
      <view 
        v-for="item in navItems" 
        :key="item.id"
        class="nav-item"
        @click="handleNavClick(item.path)"
      >
        <text class="iconfont" :class="item.icon"></text>
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 设备列表 -->
    <view class="device-list">
      <view class="search">
        <input 
          type="text" 
          v-model="searchKey"
          placeholder="搜索设备"
        />
      </view>
      
      <view 
        v-for="device in filteredDevices" 
        :key="device.id"
        class="device-item"
        @click="goToDeviceDetail(device.id)"
      >
        <view class="device-info">
          <text class="device-name">{{ device.name }}</text>
          <text :class="['status', device.status]">{{ device.statusText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'

// 时间显示
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
}
setInterval(updateTime, 1000)

// 用户信息
const userInfo = ref({
  name: '小米用户'
})

// 导航项
const navItems = [
  { id: 1, name: '设备总览', icon: 'icon-overview', path: '/pages/overview/index' },
  { id: 2, name: '设备控制', icon: 'icon-control', path: '/pages/control/index' },
  { id: 3, name: '测试模式', icon: 'icon-test', path: '/pages/test/index' }
]

// 设备列表
const devices = ref([
  { 
    id: 1, 
    name: 'GRAS-1-50K采集', 
    status: 'running',
    statusText: '运行中'
  },
  // ... 其他设备
])

// 搜索功能
const searchKey = ref('')
const filteredDevices = computed(() => {
  return devices.value.filter(device => 
    device.name.toLowerCase().includes(searchKey.value.toLowerCase())
  )
})

// 页面跳转
const handleNavClick = (path: string) => {
  uni.navigateTo({ url: path })
}

const goToDeviceDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/device/detail?id=${id}`
  })
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #1a2433;
}

.nav {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: #1a2433;
  margin: 20rpx 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #4a9eff;
}

.device-list {
  background-color: #1a2433;
  border-radius: 10rpx;
  padding: 20rpx;
}

.device-item {
  padding: 20rpx;
  border-bottom: 1px solid #2d3747;
}

.status {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.status.running {
  background-color: #4caf50;
}

.search {
  margin-bottom: 20rpx;
}

.search input {
  background-color: #2d3747;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  color: #ffffff;
}
</style> 